<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ODF标签管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        :root {
            --primary: #2c6fbb;
            --secondary: #3a9d23;
            --accent: #ffc107;
            --dark: #1e2a38;
            --light: #f5f7fa;
            --success: #4caf50;
            --warning: #ff9800;
            --danger: #f44336;
            --info: #2196f3;
            --grey: #e0e0e0;
        }

        body {
            background: linear-gradient(135deg, #1e3c72, #2a5298);
            min-height: 100vh;
            color: #333;
            padding: 20px;
        }

        .app-container {
            max-width: 1400px;
            margin: 0 auto;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }

        .app-header {
            background-color: var(--dark);
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .app-header h1 {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 600;
            font-size: 1.8rem;
        }

        .app-header h1 i {
            color: var(--accent);
        }

        .mode-switch {
            display: flex;
            gap: 10px;
            background-color: rgba(255, 255, 255, 0.15);
            border-radius: 50px;
            padding: 5px;
        }

        .mode-switch button {
            border: none;
            background: none;
            color: rgba(255, 255, 255, 0.7);
            padding: 10px 20px;
            border-radius: 50px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }

        .mode-switch button.active {
            background-color: var(--accent);
            color: var(--dark);
        }

        .tab-nav {
            display: flex;
            background-color: var(--primary);
            padding: 0 20px;
        }

        .tab-nav button {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.8);
            padding: 16px 24px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            transition: all 0.3s;
        }

        .tab-nav button.active {
            color: white;
            background-color: rgba(255, 255, 255, 0.15);
        }

        .tab-nav button.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: var(--accent);
        }

        .app-content {
            padding: 25px;
            min-height: 500px;
        }

        .tag-management {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .toolbar {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
            background-color: #f0f5ff;
            padding: 20px;
            border-radius: 10px;
            border: 1px solid #d0e0ff;
        }

        .odm-filter,
        .search-box,
        .actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        select,
        input {
            padding: 12px 16px;
            border: 1px solid #d0d0d0;
            border-radius: 8px;
            font-size: 1rem;
        }

        .search-box {
            position: relative;
        }

        .search-box i {
            position: absolute;
            right: 15px;
            color: #888;
        }

        .search-box input {
            padding-right: 40px;
        }

        .actions button {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 20px;
            border-radius: 8px;
            border: none;
            background-color: var(--primary);
            color: white;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .actions button:hover {
            background-color: #1a519e;
        }

        .btn-template {
            background-color: #6c757d !important;
        }

        .btn-template:hover {
            background-color: #5a6268 !important;
        }

        .btn-validate {
            background-color: var(--success) !important;
        }

        .btn-validate:hover {
            background-color: #3d8b40 !important;
        }

        .tag-table-container {
            overflow-x: auto;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border: 1px solid #e0e0e0;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th {
            background-color: #f5f7fa;
            padding: 16px 12px;
            text-align: left;
            font-weight: 600;
            color: #2d3748;
            border-bottom: 2px solid #e2e8f0;
        }

        td {
            padding: 14px 12px;
            border-bottom: 1px solid #edf2f7;
        }

        tr:hover {
            background-color: #f8f9fc;
        }

        tr:nth-child(even) {
            background-color: #f9fbfe;
        }

        /* 单扫模式表格 */
        .single-table th,
        .single-table td {
            min-width: 150px;
        }

        /* 群扫模式表格 */
        .batch-table th,
        .batch-table td {
            min-width: 120px;
            text-align: center;
        }

        .batch-table th[colspan] {
            text-align: center;
            background-color: #e8eeff;
        }

        .group-header {
            background-color: #f0f5ff !important;
        }

        .port-row.pending td {
            background-color: #fff8e1;
        }

        .port-row.success td {
            background-color: #e8f5e9;
        }

        .port-row.error td {
            background-color: #ffebee;
        }

        .row-actions {
            text-align: center;
        }

        .batch-actions {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            padding: 20px;
            background-color: #f8f9fc;
            border-top: 1px solid #e2e8f0;
            border-radius: 0 0 10px 10px;
        }

        .btn-add-row,
        .btn-batch-scan {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 20px;
            border-radius: 8px;
            border: none;
            color: white;
            font-weight: 500;
            cursor: pointer;
        }

        .btn-add-row {
            background-color: #6c757d;
        }

        .btn-add-row:hover {
            background-color: #5a6268;
        }

        .btn-batch-scan {
            background-color: var(--success);
        }

        .btn-batch-scan:hover {
            background-color: #3d8b40;
        }

        .tag-input-container {
            display: flex;
            gap: 5px;
        }

        .tag-input-container input {
            flex: 1;
            min-width: 120px;
        }

        .btn-scan {
            background-color: var(--accent);
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            color: var(--dark);
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .tag-display {
            cursor: pointer;
            padding: 10px;
            background-color: #f8f9fc;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            min-height: 42px;
        }

        .tag-display .empty {
            color: #a0aec0;
            font-style: italic;
        }

        .port-detail-panel {
            background-color: white;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 25px;
            margin-top: 25px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }

        .detail-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f3f7;
        }

        .detail-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
        }

        .detail-section {
            background-color: #f8f9fc;
            border-radius: 8px;
            padding: 20px;
            border: 1px solid #edf2f7;
        }

        .detail-section h3 {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e2e8f0;
            color: var(--primary);
        }

        .info-item {
            display: flex;
            margin-bottom: 10px;
        }

        .info-label {
            font-weight: 600;
            min-width: 140px;
            color: #4a5568;
        }

        .info-value {
            color: #2d3748;
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            border-radius: 50px;
            font-size: 0.9rem;
        }

        .status-badge.pending {
            background-color: #fff8e1;
            color: #ff8f00;
        }

        .status-badge.success {
            background-color: #e8f5e9;
            color: #2e7d32;
        }

        .status-badge.error {
            background-color: #ffebee;
            color: #c62828;
        }

        .history-item {
            padding: 10px 0;
            border-bottom: 1px dashed #e2e8f0;
        }

        .history-item:last-child {
            border-bottom: none;
        }

        .btn-save {
            background-color: var(--success);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 8px 12px;
            cursor: pointer;
        }

        /* 响应式调整 */
        @media (max-width: 992px) {
            .toolbar {
                flex-direction: column;
                align-items: flex-start;
            }

            .detail-content {
                grid-template-columns: 1fr;
            }

            .odm-filter,
            .search-box {
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            .app-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .batch-table {
                min-width: 1200px;
            }

            .tab-nav {
                flex-direction: column;
                padding: 0;
            }

            .tab-nav button {
                width: 100%;
            }

            .tag-table-container {
                overflow-x: auto;
            }
        }
    </style>
</head>

<body>
    <div class="app-container">
        <!-- 应用头部 -->
        <div class="app-header">
            <h1><i class="fas fa-project-diagram"></i>ODF标签管理系统</h1>
            <div class="mode-switch">
                <button class="active">单扫模式</button>
                <button>群扫模式</button>
            </div>
        </div>

        <!-- 标签页导航 -->
        <div class="tab-nav">
            <button><i class="fas fa-sitemap"></i> ODF层级视图</button>
            <button class="active"><i class="fas fa-tags"></i> 标签填报管理</button>
        </div>

        <!-- 主内容区 -->
        <div class="app-content">
            <div class="tag-management">
                <!-- 工具栏 -->
                <div class="toolbar">
                    <div class="odm-filter">
                        <label>ODM筛选：</label>
                        <select>
                            <option>选择ODM</option>
                            <option>ODM-1</option>
                            <option selected>ODM-2</option>
                            <option>ODM-3</option>
                            <option>ODM-4</option>
                            <option>ODM-5</option>
                            <option>ODM-6</option>
                        </select>
                    </div>

                    <div class="search-box">
                        <input type="text" placeholder="搜索标签ID...">
                        <i class="fas fa-search"></i>
                    </div>

                    <div class="actions">
                        <button class="btn-import"><i class="fas fa-file-import"></i> 导入填报表</button>
                        <button class="btn-template"><i class="fas fa-file-excel"></i> 获取空白模板</button>
                        <button class="btn-validate"><i class="fas fa-check-circle"></i> 验证一致性</button>
                    </div>
                </div>

                <!-- 单扫模式表格 -->
                <div class="tag-table-container">
                    <table class="tag-table single-table">
                        <thead>
                            <tr>
                                <th>托盘</th>
                                <th>端口</th>
                                <th class="required">电子标签值</th>
                                <th class="required">插头标签值</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 托盘1 -->
                            <tr class="port-row">
                                <td rowspan="12">托盘-1</td>
                                <td>端口-1</td>
                                <td>
                                    <div class="tag-display">
                                        E2000017221101020790B774
                                        <i class="fas fa-pencil-alt"></i>
                                    </div>
                                </td>
                                <td>
                                    <div class="tag-display">
                                        <span class="empty">未录入</span>
                                        <i class="fas fa-pencil-alt"></i>
                                    </div>
                                </td>
                                <td>
                                    <span class="status-badge pending"><i class="fas fa-clock"></i> 待扫描</span>
                                    <div>2023-10-20 09:30:22</div>
                                </td>
                                <td>
                                    <button class="btn-scan"><i class="fas fa-qrcode"></i> 扫描</button>
                                </td>
                            </tr>
                            <tr class="port-row pending">
                                <td>端口-2</td>
                                <td>
                                    <div class="tag-display">
                                        E200001722110190B77423A1
                                        <i class="fas fa-pencil-alt"></i>
                                    </div>
                                </td>
                                <td>
                                    <div class="tag-display">
                                        E200001722110190B123BCC3
                                        <i class="fas fa-pencil-alt"></i>
                                    </div>
                                </td>
                                <td>
                                    <span class="status-badge warning"><i class="fas fa-exclamation-triangle"></i>
                                        需复核</span>
                                    <div>2023-10-20 10:15:45</div>
                                </td>
                                <td>
                                    <button class="btn-scan"><i class="fas fa-qrcode"></i> 扫描</button>
                                </td>
                            </tr>
                            <tr class="port-row success">
                                <td>端口-3</td>
                                <td>
                                    <div class="tag-display">
                                        E2000017221101020790B774
                                        <i class="fas fa-pencil-alt"></i>
                                    </div>
                                </td>
                                <td>
                                    <div class="tag-display">
                                        E2000017221101020790D332
                                        <i class="fas fa-pencil-alt"></i>
                                    </div>
                                </td>
                                <td>
                                    <span class="status-badge success"><i class="fas fa-check-circle"></i> 已验证</span>
                                    <div>2023-10-20 11:20:18</div>
                                </td>
                                <td>
                                    <button class="btn-scan"><i class="fas fa-qrcode"></i> 扫描</button>
                                </td>
                            </tr>
                            <tr class="port-row error">
                                <td>端口-4</td>
                                <td>
                                    <div class="tag-display">
                                        E2000017221101020790B774
                                        <i class="fas fa-pencil-alt"></i>
                                    </div>
                                </td>
                                <td>
                                    <div class="tag-display">
                                        <span class="empty">未录入</span>
                                        <i class="fas fa-pencil-alt"></i>
                                    </div>
                                </td>
                                <td>
                                    <span class="status-badge error"><i class="fas fa-times-circle"></i> 不匹配</span>
                                    <div>2023-10-20 12:05:31</div>
                                </td>
                                <td>
                                    <button class="btn-scan"><i class="fas fa-qrcode"></i> 扫描</button>
                                </td>
                            </tr>
                            <tr class="port-row">
                                <td>端口-5</td>
                                <td>
                                    <div class="tag-display">
                                        <span class="empty">未录入</span>
                                        <i class="fas fa-pencil-alt"></i>
                                    </div>
                                </td>
                                <td>
                                    <div class="tag-display">
                                        <span class="empty">未录入</span>
                                        <i class="fas fa-pencil-alt"></i>
                                    </div>
                                </td>
                                <td>
                                    <span class="status-badge pending"><i class="fas fa-clock"></i> 待扫描</span>
                                    <div>未扫描</div>
                                </td>
                                <td>
                                    <button class="btn-scan"><i class="fas fa-qrcode"></i> 扫描</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 端口详情面板 -->
                <div class="port-detail-panel">
                    <div class="detail-header">
                        <h2>端口详情 <span style="color: var(--primary);">ODM-2 > 托盘-1 > 端口-3</span></h2>
                    </div>

                    <div class="detail-content">
                        <div class="detail-section">
                            <h3><i class="fas fa-qrcode"></i> 标签信息</h3>

                            <div class="info-item">
                                <div class="info-label">电子标签值：</div>
                                <div class="info-value">E2000017221101020790B774</div>
                            </div>

                            <div class="info-item">
                                <div class="info-label">插头标签值：</div>
                                <div class="info-value">E2000017221101020790D332</div>
                            </div>

                            <div class="info-item">
                                <div class="info-label">当前状态：</div>
                                <div class="info-value">
                                    <span class="status-badge success"><i class="fas fa-check-circle"></i> 已验证</span>
                                </div>
                            </div>

                            <div class="info-item">
                                <div class="info-label">最后扫描时间：</div>
                                <div class="info-value">2023-10-20 11:20:18.456</div>
                            </div>

                            <div class="info-item">
                                <div class="info-label">扫描设备：</div>
                                <div class="info-value">Handheld-003</div>
                            </div>

                            <div class="info-item">
                                <div class="info-label">操作员：</div>
                                <div class="info-value">李明</div>
                            </div>
                        </div>

                        <div class="detail-section">
                            <h3><i class="fas fa-history"></i> 位置变更历史</h3>

                            <div class="history-item">
                                <div><strong>2023-10-20 10:45:22</strong></div>
                                <div>从 ODM-2 > 托盘-2 > 端口-6 移动至当前位置</div>
                                <div><i>操作员：张伟</i></div>
                            </div>

                            <div class="history-item">
                                <div><strong>2023-10-15 14:30:18</strong></div>
                                <div>在 ODM-2 > 托盘-2 > 端口-6 位置首次扫描</div>
                                <div><i>操作员：王芳</i></div>
                            </div>

                            <div class="history-item">
                                <div><strong>2023-10-10 09:12:33</strong></div>
                                <div>原始预设位置 ODM-3 > 托盘-5 > 端口-3</div>
                                <div><i>自动预设</i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 模式切换功能
        document.querySelectorAll('.mode-switch button').forEach(button => {
            button.addEventListener('click', function () {
                document.querySelectorAll('.mode-switch button').forEach(btn => {
                    btn.classList.remove('active');
                });
                this.classList.add('active');

                // 在实际应用中，这里会切换单扫/群扫模式的显示
                alert('切换到：' + this.textContent);
            });
        });

        // 标签编辑功能
        document.querySelectorAll('.tag-display').forEach(display => {
            display.addEventListener('click', function () {
                const currentValue = this.textContent.trim();
                const isPlaceholder = this.querySelector('.empty');

                let defaultValue = '';
                if (currentValue !== '未录入') {
                    defaultValue = currentValue;
                }

                const inputHtml = `
                    <div class="tag-input-container">
                        <input type="text" value="${defaultValue}" placeholder="输入标签值">
                        <button class="btn-save"><i class="fas fa-check"></i></button>
                    </div>
                `;

                this.parentElement.innerHTML = inputHtml;

                // 添加保存按钮事件
                const saveBtn = this.parentElement.querySelector('.btn-save');
                saveBtn.addEventListener('click', function () {
                    const inputValue = this.previousElementSibling.value;
                    const cellElement = this.closest('td');

                    if (inputValue) {
                        cellElement.innerHTML = `
                            <div class="tag-display">
                                ${inputValue}
                                <i class="fas fa-pencil-alt"></i>
                            </div>
                        `;
                    } else {
                        cellElement.innerHTML = `
                            <div class="tag-display">
                                <span class="empty">未录入</span>
                                <i class="fas fa-pencil-alt"></i>
                            </div>
                        `;
                    }

                    // 重新绑定事件
                    attachTagEvents();
                });
            });
        });

        // 重新绑定标签编辑事件的辅助函数
        function attachTagEvents() {
            document.querySelectorAll('.tag-display').forEach(display => {
                display.addEventListener('click', function () {
                    const currentValue = this.textContent.trim();
                    const isPlaceholder = this.querySelector('.empty');

                    let defaultValue = '';
                    if (currentValue !== '未录入') {
                        defaultValue = currentValue;
                    }

                    const inputHtml = `
                        <div class="tag-input-container">
                            <input type="text" value="${defaultValue}" placeholder="输入标签值">
                            <button class="btn-save"><i class="fas fa-check"></i></button>
                        </div>
                    `;

                    this.parentElement.innerHTML = inputHtml;

                    // 添加保存按钮事件
                    const saveBtn = document.querySelector('.btn-save');
                    saveBtn.addEventListener('click', function () {
                        const inputValue = this.previousElementSibling.value;
                        const cellElement = this.closest('td');

                        if (inputValue) {
                            cellElement.innerHTML = `
                                <div class="tag-display">
                                    ${inputValue}
                                    <i class="fas fa-pencil-alt"></i>
                                </div>
                            `;
                        } else {
                            cellElement.innerHTML = `
                                <div class="tag-display">
                                    <span class="empty">未录入</span>
                                    <i class="fas fa-pencil-alt"></i>
                                </div>
                            `;
                        }

                        // 重新绑定事件
                        attachTagEvents();
                    });
                });
            });
        }

        // 初始化扫描按钮功能
        document.querySelectorAll('.btn-scan').forEach(button => {
            button.addEventListener('click', function () {
                const row = this.closest('tr');
                const portInfo = row.querySelector('td:nth-child(2)').textContent;

                alert(`开始扫描：${portInfo}`);

                // 随机更新状态
                const statuses = ['pending', 'success', 'error'];
                const randomStatus = statuses[Math.floor(Math.random() * statuses.length)];
                const badges = {
                    pending: '<i class="fas fa-clock"></i> 待扫描',
                    success: '<i class="fas fa-check-circle"></i> 已验证',
                    error: '<i class="fas fa-times-circle"></i> 不匹配'
                };

                row.className = `port-row ${randomStatus}`;
                row.querySelector('td:nth-child(5)').innerHTML = `
                    <span class="status-badge ${randomStatus}">${badges[randomStatus]}</span>
                    <div>${new Date().toLocaleString()}</div>
                `;
            });
        });
    </script>
</body>

</html>